<template>
  <div class="app-container">
    <el-space :fill="true" wrap>
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>担保概况</span>
            <div>
              <el-space wrap>
                <el-button class="button">导出数据</el-button>
                <el-radio-group v-model="dateType">
                  <el-radio-button label="1">昨天</el-radio-button>
                  <el-radio-button label="2">最近7天</el-radio-button>
                  <el-radio-button label="3">最近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="dateType == 3" v-model="date" type="daterange" />
              </el-space>
            </div>
          </div>
        </template>
        <el-row>
          <el-col :span="12">
            <table class="table-border">
              <tr class="table-title">
                <td>申请担保数</td>
                <td>有效担保数</td>
                <td>审批未通过</td>
              </tr>
              <tr>
                <td>2000</td>
                <td>1500</td>
                <td>200</td>
              </tr>
              <tr class="table-title">
                <td>放款人数</td>
                <td>放款金额</td>
                <td>平均担保金额</td>
              </tr>
              <tr>
                <td>180</td>
                <td>￥1905871.71</td>
                <td>￥15285.99</td>
              </tr>
            </table>
          </el-col>
          <el-col :span="12">
            <div id="summaryChart" :style="{ width: '100%', height: '300px' }"></div>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>新老客户担保构成</span>
            <div>
              <el-space wrap>
                <el-button class="button">导出数据</el-button>
                <el-radio-group v-model="dateType">
                  <el-radio-button label="1">上月</el-radio-button>
                  <el-radio-button label="2">本月</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="dateType == 3" v-model="date" type="daterange" />
              </el-space>
            </div>
          </div>
        </template>
        <el-row>
          <el-col :span="12">
            <div id="customerChart" :style="{ width: '100%', height: '300px' }"></div>
          </el-col>
          <el-col :span="12">
            <table class="table-border">
              <tr class="table-title">
                <td></td>
                <td>担保金额</td>
                <td>较前一月</td>
                <td>担保人数</td>
                <td>较前一月</td>
              </tr>
              <tr>
                <td>新客户</td>
                <td>￥1970700.49</td>
                <td>↑ 1.00%</td>
                <td>30</td>
                <td>↑ 4.73%</td>
              </tr>
              <tr>
                <td>老客户</td>
                <td>￥100万</td>
                <td>↑ 3.23%</td>
                <td>42</td>
                <td>↑ 5.25%</td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>担保走势数据</span>
            <div>
              <el-space wrap>
                <el-button class="button">导出数据</el-button>
                <el-radio-group v-model="dateType">
                  <el-radio-button label="1">昨天</el-radio-button>
                  <el-radio-button label="2">最近7天</el-radio-button>
                  <el-radio-button label="3">最近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="dateType == 3" v-model="date" type="daterange" />
              </el-space>
            </div>
          </div>
        </template>
        <div id="trendChart" :style="{ width: '100%', height: '300px' }"></div>
      </el-card>
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>担保省份分布</span>
            <div>
              <el-space wrap>
                <el-button class="button">导出数据</el-button>
                <el-radio-group v-model="dateType">
                  <el-radio-button label="1">昨天</el-radio-button>
                  <el-radio-button label="2">最近7天</el-radio-button>
                  <el-radio-button label="3">最近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="dateType == 3" v-model="date" type="daterange" />
              </el-space>
            </div>
          </div>
        </template>
        <el-row>
          <el-col :span="12">
            <div id="provinceChart" :style="{ width: '100%', height: '300px' }"></div>
          </el-col>
          <el-col :span="12">
            <el-table v-loading="loading" :data="provinceList">
              <el-table-column label="省份" align="center" prop="name" />
              <el-table-column label="担保金额" align="center" prop="money" />
              <el-table-column label="较前一月" align="center" prop="previousMoney" />
              <el-table-column label="担保人数" align="center" prop="number" />
              <el-table-column label="较前一月" align="center" prop="previousNumber" />
            </el-table>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <template #header>
          <div class="flex-between">
            <span>担保金额分布</span>
            <div>
              <el-space wrap>
                <el-button class="button">导出数据</el-button>
                <el-radio-group v-model="dateType">
                  <el-radio-button label="1">昨天</el-radio-button>
                  <el-radio-button label="2">最近7天</el-radio-button>
                  <el-radio-button label="3">最近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="dateType == 3" v-model="date" type="daterange" />
              </el-space>
            </div>
          </div>
        </template>
        <div id="moneyChart" :style="{ width: '100%', height: '300px' }"></div>
      </el-card>
    </el-space>
  </div>
</template>

<script setup name="Statistics">
import * as echarts from "echarts";
import chinaJson from "@/china.json";

const dateType = ref("1");
const date = ref([]);
const loading = ref(false);
const provinceList = [
  {
    name: "广东省",
    money: "8085.25万",
    number: "589",
    previousMoney: " ↑ 4.73%",
    previousNumber: " ↑ 4.73%",
  },

  {
    name: "山西省",
    money: "580.63万",
    number: "260",
    previousMoney: " ↑ 4.73%",
    previousNumber: " ↑ 4.73%",
  },
  {
    name: "北京市",
    money: "485.58万",
    number: "158",
    previousMoney: " ↑ 4.73%",
    previousNumber: " ↑ 4.73%",
  },
  {
    name: "上海市",
    money: "100万",
    number: "99",
    previousMoney: " ↑ 4.73%",
    previousNumber: " ↑ 4.73%",
  },
  {
    name: "湖南省",
    money: "100万",
    number: "58",
    previousMoney: " ↑ 2.00%",
    previousNumber: " ↑ 4.00%",
  },
];
let echart = echarts;
onMounted(() => {
  let summaryChart = echart.init(document.getElementById("summaryChart"));
  let customerChart = echart.init(document.getElementById("customerChart"));
  let provinceChart = echart.init(document.getElementById("provinceChart"));
  let trendChart = echart.init(document.getElementById("trendChart"));
  let moneyChart = echart.init(document.getElementById("moneyChart"));
  // 担保概况
  summaryChart.setOption({
    series: [
      {
        name: "Expected",
        type: "funnel",
        left: "10%",
        width: "70%",
        label: {
          formatter: "{b}",
          position: "center",
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          opacity: 0.7,
        },
        emphasis: {
          label: {
            position: "inside",
            formatter: "{b}转化率: {c}%",
          },
        },
        data: [
          { value: 100, name: "申请担保" },
          { value: 60, name: "担保成功" },
          { value: 20, name: "放款" },
        ],
      },
    ],
  });
  // 新老客户担保构成
  customerChart.setOption({
    legend: {
      left: "center",
      bottom: 20,
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "老客户" },
          { value: 735, name: "新客户" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });
  //   趋势图
  trendChart.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
      {
        type: "value",
      },
    ],
    series: [
      {
        type: "bar",
        tooltip: {
          valueFormatter: function (value) {
            return value + " ml";
          },
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      },
      {
        type: "line",
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + " °C";
          },
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      },
    ],
  });
  //   担保省份分布
  echarts.registerMap("china", chinaJson); //注册可用的地图
  provinceChart.setOption({
    visualMap: {
      orient: "horizontal",
      min: 800,
      max: 50000,
      text: ["41", "1"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["#639fe0", "#acccef"],
      },
    },
    geo: {
      show: true, //设置中心点
      center: [105.194115019531, 35.582111640625],
      map: "china",
      roam: true, //是否允许缩放，拖拽
      zoom: 1.5, //初始化大小 //缩放大小限制
      scaleLimit: {
        min: 0.1, //最小
        max: 12, //最大
      }, //各个省份模块样式设置
      itemStyle: {
        normal: {
          areaColor: "#aad5ff", //背景色
          color: "red", //字体颜色
          borderColor: "#5e84fd",
          borderWidth: 2,
        },
      }, //高亮状态
      emphasis: {
        itemStyle: {
          areaColor: "#629fe0",
        },
        label: {
          show: true,
          color: "#fff",
        },
      }, // 显示层级
      z: 10,
    },
  });
  // 担保金额分布
  moneyChart.setOption({
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
      },
    ],
  });
});
</script>
<style scoped>
.flex-between {
  display: flex;
  justify-content: space-between;
  align-content: center;
}
.table-border,
.table-border tr th,
.table-border tr td {
  border: 1px solid #ccc;
}
.table-border {
  box-sizing: border-box;
  width: 100%;
  line-height: 32px;
  border-collapse: collapse;
  text-align: center;
  margin-top: 96px;
}
.table-border .table-title {
  font-weight: bold;
  background: #f9fafc;
}
</style>
